<template>
  <button @click="btnClick">Toggle</button>

  <transition name="fade">
    <div v-if="isShow">Hello World</div>
  </transition>
</template>
<script setup>
import { ref } from "vue";
const isShow = ref(true);
function btnClick() {
  isShow.value = !isShow.value;
}
</script>
<style scoped>
/* from to  */
/* tansiton没有起名字 v-开头 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* 这个可省略 因为dom中显示时默认就是 1 */
.fade-leave-from,
.fade-enter-to {
  opacity: 1;
}
/* 进入和离开中 */
.fade-enter-active,
.fade-leave-active {
  /* tansiton过渡 只是两帧 两种状态 显示到隐藏 */
  transition: opacity 1s ease;
}
</style>
